<el-dialog :visible.sync="topicdialogVisible" width="900px" title="知识点出题" @close="handleClose"></el-dialog>
    <div class="dialog-content">
      <!-- 左侧设置区域 -->
      <div class="dialog-left">
        <div class="block-type">
          <div class="title">题目类型</div>
          <div class="button-group-father">
            <el-button-group class="button-group">
              <!-- 第一行：单选题和判断题 -->
              <div class="button-row">
                <el-button v-for="type in questionTypes.slice(0, 2)" :key="type.value"
                  :type="selectedType === type.value ? 'primary' : 'default'" @click="selectedType = type.value"
                  class="flex-button">
                  {{ type.label }}
                </el-button>
              </div>

              <!-- 第二行：多选题和填空题 -->
              <div class="button-row">
                <el-button v-for="type in questionTypes.slice(2, 4)" :key="type.value"
                  :type="selectedType === type.value ? 'primary' : 'default'" @click="selectedType = type.value"
                  class="flex-button">
                  {{ type.label }}
                </el-button>
              </div>

              <!-- 第三行：简答题（单独占满一行） -->
              <div class="button-row full-width-row">
                <el-button v-for="type in questionTypes.slice(4, 5)" :key="type.value"
                  :type="selectedType === type.value ? 'primary' : 'default'" @click="selectedType = type.value"
                  class="full-width-button">
                  {{ type.label }}
                </el-button>
              </div>
            </el-button-group>
          </div>

        </div>

        <div class="block">
          <div class="title">题目难度</div>
          <el-button-group>
            <el-button v-for="level in difficultyLevels" :key="level.value"
              :type="selectedDifficulty === level.value ? 'primary' : 'default'"
              @click="selectedDifficulty = level.value">
              {{ level.label }}
            </el-button>
          </el-button-group>
        </div>

        <div class="block">
          <div class="title">题目数量</div>
          <el-input-number v-model="questionCount" :min="1" :max="20" size="small" />
        </div>
        <div class="block">
          <div class="title">场景应用</div>
          <el-button-group>
            <el-button v-for="scenario in difficultyScenario" :key="scenario.value"
              :type="selectedScenario === scenario.value ? 'primary' : 'default'"
              @click="selectedScenario = scenario.value">
              {{ scenario.label }}
            </el-button>
          </el-button-group>
        </div>

        <div class="block">
          <div class="title">题目生成提示语</div>
          <el-input v-model="knowledgePoints" placeholder="1.根据所选知识点大纲，随机生成，给出答案解析。\n2.请注意题目难度，选择合适的题目类型。"
            type="textarea" />
        </div>

        <!-- <div class="block">
          <div class="title">选择课程</div>
          <el-select v-model="selectedCourse" placeholder="请选择课程" size="small">
            <el-option v-for="course in courses" :key="course.id" :label="course.name" :value="course.id"></el-option>
          </el-select>
        </div>

        <div class="block">
          <div class="title">选择章节</div>
          <el-select v-model="selectedChapter" placeholder="请选择章节" size="small">
            <el-option v-for="chapter in chapters" :key="chapter.id" :label="chapter.name"
              :value="chapter.id"></el-option>
          </el-select>
        </div> -->
        <el-button type="primary" @click="generateQuestions" style="margin-top: 20px;">
          生成题目
        </el-button>
      </div>
      <div class="dialog-main-content">
        <!-- 右侧题目展示区域 -->
        <div class="dialog-right">
          <div v-if="loading" class="loading">
            <el-loading-spinner />
          </div>

          <div v-else class="question-list">
            <div v-for="(question, index) in questions" :key="index" class="question-item">
              <div class="question-header">
                <!-- 左侧内容：题目类型和难度 -->
                <div class="question-type-difficulty">
                  <el-tag>{{ question.type }}</el-tag>
                  <el-tag>{{ question.difficulty }}</el-tag>
                </div>

                <span class="knowledge-point">知识点：{{ question.knowledge }}</span>
              </div>
              <div class="question-desc"><strong>题目描述：</strong><br />{{ question.description }}</div>

              <div class="options" v-if="question.options && question.options.length">
                <div v-for="(option, index) in question.options" :key="index" class="option-item">
                  <!-- 在选项字母前加上 class 为 correct-answer 的样式，给正确答案加粗 -->
                  <span :class="{'correct-answer': option.isCorrect}">
                    <strong>{{ option.letter }}.</strong> {{ option.text }}
                  </span>
                </div>
              </div>
              <div class="answer"><strong>参考答案：</strong><br />{{ question.answer }}</div>
              <div class="analysis"><strong>题目解析：</strong><br />{{ question.analysis }}</div>
              <div class="scoring"><strong>评分标准：</strong><br />{{ question.scoring }}</div>
            </div>
          </div>
        </div>
        <!-- 右侧底部按钮区域 -->
        <div v-if="questions.length > 0" class="dialog-footer-area">
          <el-button @click="generateQuestions">重新生成</el-button>
          <div class="bottom-button">
            <el-button @click="saveDraft">保存草稿</el-button>
            <el-button @click="confirmPublish">确认发布</el-button>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>